<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>2_受控组件</title>
</head>

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<!-- 
	<script type="text/babel">
		//创建组件
		class Login extends React.Component{

			//初始化状态
			state = {
				username:'', //用户名
				password:'' //密码
			}

			//保存用户名到状态中
			saveUsername = (event)=>{
				this.setState({username:event.target.value})
			}

			//保存密码到状态中
			savePassword = (event)=>{
				this.setState({password:event.target.value})
			}

			//表单提交的回调
			handleSubmit = (event)=>{
				event.preventDefault() //阻止表单提交
				const {username,password} = this.state
				alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
			}

			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						用户名：<input onChange={this.saveUsername} type="text" name="username"/>
						密码：<input onChange={this.savePassword} type="password" name="password"/>
						<button>登录</button>
					</form>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script> -->



	<script type="text/babel">

		class Login extends React.Component{

state={
	username:"",
	password:""
}

susername=(event)=>{
this.setState({username:event.target.value})


}

spassword=(event)=>{
	this.setState({password:event.target.value})
}

handleSubmit=(event)=>{

	event.preventDefault()
	const {username,password}=this.state

	alert(`用户名是：${username},密码是：${password}`)
}
	render(){
		return (

			<form action="https://www.baidu.com" onSubmit={this.handleSubmit}>
			
		用户名：<input type="text" name="username"  onChange={this.susername}/>
		密码：<input type="text" name="password" onChange={this.spassword}/>
		<button>登录</button>
			</form>


		
		)
	}
}


ReactDOM.render(<Login/>,document.getElementById("test"))


	</script>
</body>

</html>